<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/index.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<!--[if IE 6]>
	<link href="css/ie6.css" type="text/css" rel="stylesheet" />

    <script src="js/dd_belated_png.js"></script>
	<script>DD_belatedPNG.fix('#logo a, .h-box-1 img, .h-box-2 img, .brochure img');</script>  
<![endif]-->

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jqueryslidemenu.js"></script>
<script type="text/javascript" src="js/slideswitch.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script src="js/Liberation_Sans_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1');
	Cufon.replace('h2');	
	Cufon.replace('h3');
	Cufon.replace('h4');							   	
</script>

<title>article detail</title>
</head>

<body>
<div id="body-wrapper">
    <div class="clearfix">
        <div id="logo">
            <a href="homepage.html">Media consult logo</a>
            <p class="logo-desc">your attractive and simple slogan</p>
        </div>
        <form action="#" method="post">
            <fieldset class="search-fieldset">
                <input type="text" class="search-input" value="search" name="search" />
                <input type="submit" value="" class="input-arrow" />
            </fieldset>
        </form>
    </div>	
    
    <div class="main-menu-wrapper">
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul class="primary-menu">
                <li><a href="homepage.html">Home</a></li>
                <li><a href="about_us.html">About Us</a></li>
                <li><a href="services.html">Services</a>
                	<ul>
                        <li><a href="#">Corporate Publishing</a></li>
                        <li><a href="#">Interactive &amp; Onscreen Production</a></li>	
                        <li><a href="#">Advertising</a></li>   
                        <li><a href="#">Event Management</a></li>   
                        <li><a href="#">Integrated Communications</a></li>                                                                    
                        <li><a href="#">Public Relations</a></li>                                                  
                    </ul>
                </li>
                <li><a href="#">Page Types</a>
                    <ul>
                        <li><a href="homepage.html">Index Page</a></li>
                        <li><a href="about_us.html">About Us</a></li>	
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="#">Blog - submenu entry</a>
                            <ul>
                                <li><a href="blog_itemlist.html">Blog Item List</a></li>
                                <li><a href="blog_detail.html">Blog Item Detail</a></li>
                            </ul>                
                        </li>
                        <li><a href="#">Other pages - submenu entry</a>
                            <ul>
                                <li><a href="article_detail.html">Article Detail</a></li>                    
                                <li><a href="news_list.html">News Page</a></li>                                                
                                <li><a href="services.html">Our Services</a></li>                                                                        
                                <li><a href="portfolio.html">Portfolio</a></li>                                                          
                                <li><a href="contact.php">Contact</a></li>   
                            </ul>                          
                        </li>                                         
                    </ul>
                </li>
                <li><a href="blog_itemlist.html">Blog</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="left">
		<div class="interior-header">
        	<h2>New marketing and advertising campaign</h2>
            <span class="ih-date">September 14th, 2009</span>
            <p class="intheader-paragraph">
                This section represents a detail of a case study / news item or just a detailed description of a project of yours. 
                This paragraph can be extended, the design of this template is very flexible and you can write here as much text / information as you desire.
            </p>
        </div>
        <div class="interior-content">
        	<h4>Content with a left aligned image starts here</h4>   
            <a rel="lightbox" title="detail image" href="img/detailbig_img1.jpg">
            	<img src="img/detail_img1.jpg" width="223" height="143" alt="" class="img-border left-img" />
            </a><!-- for left aligned image you use the left-img class, for right aligned image you use right-img class -->
            
        	<p>
                Consul legimus cotidieque ad pri, ad eirmod vivendum duo, cum amet fuisset at. Expetenda patrioque ut duo. Ea vidisse dolorum nec. Dicunt inermis sapientem cu eos. Eum solet pertinax no, ei illum aliquam patrioque usu. Ne nihil altera sit, in impedit tractatos disputando nec, qui solet numquam alienum no. Ea eum pericula electram euripidis, ea vix dicat maiestatis persequeris, te illum noster iudicabit vel.
            </p>
        	<p>
Ne sint qualisque liberavisse mea, elit detracto disputationi vel in, elit minim referrentur at sed. Ex his atqui solet, inani bonorum constituam vix et, regione ancillae at mea. Sea in bonorum lucilius recteque. Vim ex alii brute cetero, eum eu eros bonorum molestiae vim ex alii brute cetero, eum eu eros bonorum molestiae. At inani paulo inermis vix, sed an diam animal vidisse, mei ullum prompta omittantur ex. Pro te falli gubergren definiebas, ea fabulas epicurei lobortis duo, te quodsi dolores maiestatis usu.
            </p>  
            
            <blockquote class="bq-detailpage">
                <p>
                    "This detail page contains a lot of text with rather small left and right aligned images. But that’s not a problem since bigger images (see blog section) can be inlcuded"            
                </p>   
                <p class="bq-author">John Doe, <a href="#">Company Name</a></p>                
            </blockquote>
            <p>
Te iudico efficiendi complectitur nec, mutat delicatissimi mediocritatem an vis. Verear nominati conceptam ut pro, pro viderer feugiat conceptam ea, ei choro hendrerit pri. Cu vix eius takimata reformidans, mea sumo malis option in, mea no dolor nemore aliquid. Pro ne vivendo omnesque accusamus, et legere quaerendum concludaturque nec. Per ea hinc movet option, at dolor tibique contentiones per, falli integre aliquyam mel cu.             
            </p>
            
            <p>
            	Eos te nostrud nominavi temporibus, ut nam essent mandamus definitio congue scribentur appellantur ex eum, postea vivendo consequat ut per. Pri ex atqui tollit, id sit illud alterum, id has modus munere philosophia. At nostrum apeirian argumentum vim, eos id quas probo ludus. 
            </p>
            
            <h4>A new paragraph starts here, with a right aligned image</h4>  
            <a rel="lightbox" title="detail image" href="img/detailbig_img2.jpg">
            	<img src="img/detail_img2.jpg" width="336" height="181" alt="" class="img-border right-img" />
            </a><!-- for left aligned image you use the left-img class, for right aligned image you use right-img class -->            
            <p>
                Sed ad veri laudem prodesset, latine aeterno ornatus mei at, nec quod ludus sanctus in. Pri id dicta erant erroribus, quis munere aliquam his in. Nam cu laudem adipiscing, his cu omnium volumus concludaturque, has consulatu interesset ne.            	
            </p>
            
            <p>
                 Simul ignota meliore id vix, populo legimus delectus vel ex, vel elit habeo patrioque at. Vis solum persecuti comprehensam cu, virtute denique quaerendum et mel. Eu eros autem zzril vix, usu meis reprimique efficiendi ei. Per ea hinc movet option, at dolor tibique contentiones per, falli integre aliquyam mel cu. Eos te nostrud nominavi temporibus, ut nam essent mandamus definitionem, at vix justo deleniti iudicabit. Id omnes fabulas maiorum ius, an deserunt rationibus per, sit te quis aperiam dolorem.            
            </p>


		</div>
        
    </div>
    <div id="right">
		<div class="services-box">
        	<h3>Services</h3>
            <p>Phasellus ipsum nulla, dignissim condimentum mattis sit amet, feugiat a nulla.</p>
            <ul class="services-box-list">
                <li><a href="#">Ingeniosity</a></li>
                <li><a href="#">Clarity</a></li>
                <li><a href="#">Performance</a></li>
                <li><a href="#">Initiative</a></li>
                <li><a href="#">Learning &amp; Leadership</a></li>
                <li><a href="#">Customer insight</a></li>
            </ul>             
        </div>
        
        <div class="newsletter"><!-- newsletter section -->
			<h3>Sign up for Newsletter</h3>
            <form action="#" method="post">
            	<fieldset class="newsletter-fieldset">
                    <input type="text" class="newsletter-input" value="Your email address" name="newsletter" />
                    <input type="submit" value="" class="input-arrow" />
                </fieldset>
            </form>
            <p>We will keep you up to date with news, events and other great features.</p>
        </div>
        
        <div class="aboutus-box">
        	<h3>About Us</h3>
            <p>
            	You don’t have to include all those boxes in your site. I provided all those right sections: about us, tabular section, right-services, newsletter, brochure download, latest news so that you can have a lot of options to chose from when building the final product.
            </p>
            <div class="body-rm"><a href="#">learn more</a></div>            
        </div>
    	
        <div class="brochure"><!-- brochure section -->
        	<a href="#"><img src="img/pdf_icon.png" width="43" height="53" alt="" /></a>
            <div class="brochure-title">
                <h3>Media Consult brochure</h3>
                <p class="header-desc">Download our PDF brochure</p>
            </div>            
        </div>
        
        <div class="tabular-block"><!-- tabs section -->
            <h3>Some tabular information</h3>
            
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Tab 1</a></li>
                    <li><a href="#tabs-2">Tab 2</a></li>
                    <li><a href="#tabs-3">Tab 3</a></li>
                </ul>
                <div id="tabs-1">
                    <h4>Tab 1 title could make it here</h4>
                    <p>
                        Mea eu brute decore veritus, usu altera interesset sadipscing id, soluta oblique num quam et vel. 
                        His mollis aperiri voluptaria id, te usu invidunt assentior. 
                    </p>
                    <p>
                        Sea veri dolorem in. Nam at consulatu referrentur, ferri commune quaestio vis an.
                    </p>
                </div>
                <div id="tabs-2">
                    <h4>Tab 2 title goes here</h4>
                    <p>
                        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. 
                        Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
                    </p>
                </div>
                <div id="tabs-3">
                    <h4>Tab 3 title</h4>
                    <p>
                        Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, 
                        sagittis et, consequat vestibulum, lacus. Etiam appetere sensibus no per, stet periculis philosophia mei in,
                        nisl nostro at pro. Vis noster quodsi urbanitas ea, solum harum expetenda pri in.
                    </p>
                </div>
            </div>   
        </div>         
    </div>  
    <div id="footer">
    	<ul>
        	<li><a href="homepage.html">Home</a></li>
        	<li><a href="about_us.html">About Us</a></li>
        	<li><a href="services.html">Services</a></li>
        	<li><a href="portfolio.html">Case Studies</a></li>
        	<li><a href="news_list.html">News</a></li>
        	<li><a href="contact.php">Contact</a></li>                                                            
        </ul>
        <div class="copyright">&copy; 2009 <a href="#">Media Consult</a>. All rights reserved.</div>
    </div>  
</div>

<script type="text/javascript">
$(document).ready(function(){					   
	$(".ln-list li").click(function(){//makes entire area "ln-list li" clickable
    	window.location=$(this).find("a").attr("href");return false;
	});
	
	$(".brochure").click(function(){//makes entire area "brochure" clickable
    	window.location=$(this).find("a").attr("href");return false;
	});	
	
});
	$(function(){	
		$('#tabs').tabs();
	});	
</script>
</body>
</html>
